import { h } from 'vue'
import { FormSchema } from '@/components/Table'
import {Switch, Tag} from 'ant-design-vue'
import { useMessage } from '@/hooks/web/useMessage'
import {updateDevice} from "@/api/device/device_list";

export const columns = [
  {
    title: '名称',
    dataIndex: 'title',
    align: 'center',
    width: 200,
    ellipsis: true,
  },
  {
    title: '序列号',
    dataIndex: 'serial_number',
    align: 'center',
    width: 200,
    ellipsis: true,
  },
  {
    title: '安装位置',
    dataIndex: 'address',
    align: 'left',
    width: 200,
    ellipsis: true,
  },
  {
    title: '描述',
    dataIndex: 'description',
    align: 'center',
    width: 200,
    ellipsis: true,
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    width: 80,
    ellipsis: true,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false
      }
      return h(Switch, {
        checked: record.status === 'enable',
        disabled: false,
        // disabled: !hasPermission(['system_role_changeState']),
        checkedChildren: '正常',
        unCheckedChildren: '禁用',
        loading: record.pendingStatus,
        onChange(checked: boolean) {
          record.pendingStatus = true
          const newStatus = checked ? 'enable' : 'disable'
          const { createMessage } = useMessage()
          updateDevice({ ...record, status: newStatus })
            .then(() => {
              record.status = newStatus
              createMessage.success(`状态修改成功`)
            })
            .catch(() => {
              createMessage.error('状态修改失败')
            })
            .finally(() => {
              record.pendingStatus = false
            })
        },
      })
    },
  },
  {
    title: '时间',
    dataIndex: 'create_time',
    align: 'center',
    width: 200,
    ellipsis: true,
  },
]

export const searchFormSchema: FormSchema[] = [
  {
    field: 'keyword',
    label: '关键词',
    component: 'Input',
    componentProps: {
      placeholder: '请输入关键词',
      autoComplete: 'off',
    },
    colProps: { span: 6 },
  },
]

export const formSchema = [
  {
    field: 'title',
    label: '名称',
    component: 'Input',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入名称',
    },
    colProps: { span: 24 },
    required: true,
  },
  {
    field: 'serial_number',
    label: '序列号',
    component: 'Input',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入序列号',
    },
    colProps: { span: 24 },
    required: true,
  },
  {
    field: 'longitude',
    label: '经度',
    component: 'Input',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入经度',
    },
    colProps: { span: 12 },
    required: false,
  },
  {
    field: 'latitude',
    label: '纬度',
    component: 'Input',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入纬度',
    },
    colProps: { span: 12 },
    required: false,
  },
  {
    field: 'address',
    label: '安装位置',
    component: 'InputTextArea',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入安装位置',
    },
    colProps: { span: 24 },
    required: false,
  },
  {
    field: 'description',
    label: '描述',
    component: 'InputTextArea',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入备注',
    },
    colProps: { span: 24 },
    required: false,
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioButtonGroup',
    defaultValue: 'enable',
    componentProps: {
      placeholder: '请输入名称',
      options: [
        { label: '正常', value: 'enable' },
        { label: '禁用', value: 'disable' },
      ]
    },
    colProps: { span: 24 },
    required: true,
  },
];
